<template>
  <n-space>
    <!-- <ul>
      <li
        v-for="item in list"
        @click="push(item.id)"
        :class="parseClass(item.id)"
        :key="item.id"
      >
      <n-checkbox v-model:checked="value"> {{ item.name }} </n-checkbox>
      </li>
    </ul> -->
  </n-space>

  <n-checkbox-group v-model:value="cities">
    <ul>
      <li v-for="item in list" :class="parseClass(item.id)" :key="item.id">
        <n-checkbox :value="item.id" :label="item.name" />
        <span>￥{{ item.money }}</span>
      </li>
    </ul>
  </n-checkbox-group>
</template>
<script setup>
const list = ref([
  { id: 1, name: "支付宝", money: 0 },
  { id: 2, name: "余额", money: 1000 },
  { id: 3, name: "兑换券", money: 100 },
  { id: 4, name: "消费券", money: 100 },
  { id: 5, name: "米积分", money: 100 },
]);

const activeList = ref([]);

const push = (item) => {
  console.log("item", item);

  if (activeList.value.indexOf(item.id) == -1) {
    activeList.value.push(item.id);
  }
};

const parseClass = (id) => {
  console.log("id", id);

  if (activeList.value.indexOf(id) != -1) {
    return `active`;
  } else {
    return `in-active`;
  }
};
</script>
<style lang="scss" scoped>
ul {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  align-items: center;
  list-style: none;

  li {
    width: 100%;
    height: 30px;
    line-height: 30px;
  }

  .in-active {
    color: #999;
  }

  .active {
    color: #ff0000;
  }
}
</style>
